<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .container {
      width: 100%;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: 700;
      color: red;
    }
    .control {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #start_btn,
    #end_btn {
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      background: #fff;
      border: 1px solid #dcdfe6;
      color: #606266;
      -webkit-appearance: none;
      text-align: center;
      box-sizing: border-box;
      outline: none;
      margin: 0;
      transition: 0.1s;
      font-weight: 500;
      padding: 12px 20px;
      font-size: 14px;
      border-radius: 4px;
      color: #fff;
      margin-left: 10px;
    }
    #start_btn {
      background-color: #67c23a;
      border-color: #67c23a;
    }
    #end_btn {
      background-color: #f56c6c;
      border-color: #f56c6c;
    }
  </style>
  <body>
    <div class="container">有请徐小仙女开始抽奖，只能点一次哦！要看好。</div>
    <div class="control">
      <div id="start_btn">开始</div>
      <div id="end_btn">停止</div>
    </div>
    <script>
      let arr = [];
      let arrMax = [];
      let colorArr = [];
      let min = 100;
      let max = 200;
      let container = document.querySelector(".container");
      let timer;
      let first_action = !Boolean(window.localStorage.getItem("lastMoney"));
      let lastMoney = window.localStorage.getItem("lastMoney");
      let endNum = 0;
      let has_one = window.localStorage.getItem("has_one");
      let no_has_one = window.localStorage.getItem("no_has_one");
      let dady = window.localStorage.getItem("dady");
      let containerNum = 0;
      let startNum = 0;
      let endBtn = 0;
      if (!first_action) {
        start_btn.style.background = "#ccc";
        start_btn.style.border = "1px solid #ccc";
        container.innerHTML = `不要想着刷新就能重新玩哦！你男人可是猜透了你的小心思了喔！我可记得你上次只拿了${window.localStorage.getItem(
          "lastMoney"
        )}元!!`;
      }
      function randomNum(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
      }
      function insertNum(min, max) {
        for (let i = min; i <= max; i = i + 5) {
          arr.push(randomNum(100, 140) + randomNum(0, 10));
          colorArr.push([
            randomNum(0, 255),
            randomNum(0, 255),
            randomNum(0, 255),
          ]);
          arrMax.push(190 + randomNum(9, 10));
        }
      }
      insertNum(min, max);
      console.log(arrMax);
      function render() {
        if (has_one) {
          no_has_one = true;
          let random_num = randomNum(0, arr.length - 1);
          let span = document.createElement("span");
          let color = `rgb(${colorArr[random_num].join(" ")})`;
          container.innerHTML = `
          <div style="color:${color}">
            <div>${arrMax[random_num]}</div>
            </div>
        `;
          lastMoney = arrMax[random_num];
          window.localStorage.setItem("lastMoney", lastMoney);
          timer = requestAnimationFrame(render);
          window.localStorage.setItem("no_has_one", "true");
          window.localStorage.removeItem("has_one");
        }
        if (first_action) {
          let random_num = randomNum(0, arr.length - 1);
          let span = document.createElement("span");
          let color = `rgb(${colorArr[random_num].join(" ")})`;
          container.innerHTML = `
          <div style="color:${color}">
            <div>${arr[random_num]}</div>
            </div>
        `;
          lastMoney = arr[random_num];
          window.localStorage.setItem("lastMoney", lastMoney);
          timer = requestAnimationFrame(render);
        }
      }
      start_btn.onclick = function () {
        startNum++;
        if (!dady && endNum) {
          start_btn.style.background = "#ccc";
          start_btn.style.borderColor = "#ccc";
          container.innerHTML = `这么想再抽一次啊! 可以,如果你叫声爸爸听听,或者娇喘一下下,可以考虑给你这个机会喔!你上次抽了${lastMoney}元，要好好考虑一下哦`;
          dady = true;
          window.localStorage.setItem("dady", "true");
        }
        if (no_has_one) {
          start_btn.style.background = "#ccc";
          start_btn.style.borderColor = "#ccc";
          container.innerHTML = `
          <div style="color:skyblue">
            <div>不许耍赖了喔，机会就这么多了,你要加油加肥才能获得更多机会和钱喔!!${lastMoney}</div>
            </div>
        `;
          return;
        }
        render();
      };
      end_btn.onclick = function () {
        endBtn++;
        if (!endNum && !has_one) {
          container.innerHTML = `
          <div style="color:skyblue">
            <div>${lastMoney}元哦！！如果觉得不满意可以再点下开始试试！！</div>
            </div>
        `;
        }
        if (has_one) {
          has_one = false;
        }
        cancelAnimationFrame(timer);
        first_action = false;

        if (endNum > 4 && !no_has_one) {
          has_one = true;
          start_btn.style.background = "#67c23a";
          start_btn.style.borderColor = "#67c23a";
          window.localStorage.setItem("has_one", "true");
          return;
        }

        endNum++;
      };
      container.onclick = function () {
        containerNum++;
        clear();
      };
      function clear() {
        if (containerNum >= 6 && startNum >= 2 && endBtn >= 2) {
          window.localStorage.clear();
          first_action = true;
          endNum = 0;
          has_one = false;
          no_has_one = false;
          start_btn.style.background = "#67c23a";
          start_btn.style.borderColor = "#67c23a";
        }
      }
    </script>
  </body>
</html>
